<template>
  <div class="container" v-if="hotellist">
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item :to='{}'>{{hotellist[0].city.name}}</el-breadcrumb-item>
      <el-breadcrumb-item>{{hotellist[0].name}}</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="basic">
      <h4>{{hotellist[0].name}}</h4>
      <div>{{hotellist[0].alias}}</div>
      <div>{{hotellist[0].address}}</div>
    </div>

    <!-- 房间照片 -->
    <div class="photo">
      <div class="content">
        <div class="left">
          <img :src="changeSrc" alt v-if="changeSrc" />
          <img src="http://157.122.54.189:9093/images/hotel-pics/1.jpeg" alt v-else />
        </div>
        <div class="right">
          <div class="right_content">
            <div v-for="(item,index) in photo" :key="index" @click="Change(index,$event)">
              <img :src="item" alt />
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 价格 -->
    <el-table :data="hotellist[0].products" style="width: 100%" @row-click="handdle">
      <el-table-column prop="name" label="价格来源" width="400"></el-table-column>
      <el-table-column prop="bestType" label="低价房源" width="400"></el-table-column>
      <el-table-column prop="price" label="最低价格/每晚"></el-table-column>
    </el-table>

    <!-- 高德地图 -->
    <Gdmap :coordinate="hotellist[0].location" :cityName="hotellist[0].city.name"></Gdmap>
    <!-- 房间信息
    -->
    <div class="room">
      <div class="assets-info">
        <div class="title">基本信息</div>
        <div class="list">
          <div class="listcontent">
            <div>入住时间: 14:00之后</div>
            <div>离店时间: 12:00之前</div>
            <div>{{hotellist[0].creation_time}}/{{hotellist[0].renovat_time}}</div>
            <div>酒店规模：{{hotellist[0].roomCount}}</div>
          </div>
        </div>
      </div>
      <div class="assets-info">
        <div class="title">主要设备</div>
        <div class="list">
          <div class="listcontent">
            <div v-for=" (item,index) in hotellist[0].hotelassets.name" :key="index"></div>
          </div>
        </div>
      </div>
      <div class="assets-info">
        <div class="title">停车服务</div>
        <div class="list">
          <div class="listcontent">
            <div>{{hotellist[0].parking}}</div>
          </div>
        </div>
      </div>
      <div class="assets-info">
        <div class="title">品牌信息</div>
        <div class="list">
          <div class="listcontent">
            <div v-if='hotellist[0].hotelbrand'>{{hotellist[0].hotelbrand.name}}</div>
            <div v-else></div>
          </div>
        </div>
      </div>
    </div>

    <!-- 评论 -->
    <Hotelcomment 
    :hotellist='hotellist'
    ></Hotelcomment >
  </div>
</template>

<script>
export default {
  data() {
    return {
      hotellist: null,
      photo: [
        "http://157.122.54.189:9093/images/hotel-pics/1.jpeg",
        "http://157.122.54.189:9093/images/hotel-pics/2.jpeg",
        "http://157.122.54.189:9093/images/hotel-pics/3.jpeg",
        "http://157.122.54.189:9093/images/hotel-pics/4.jpeg",
        "http://157.122.54.189:9093/images/hotel-pics/5.jpeg",
        "http://157.122.54.189:9093/images/hotel-pics/6.jpeg"
      ],
      changeSrc: "",
      
    };
  },
  async mounted() {
    //   酒店数据
    const res = await this.$axios.get("http://157.122.54.189:9095/hotels", {
      params: { id: this.$route.query.id }
    });
    this.hotellist = res.data.data;
    console.log(this.hotellist)
   
  },
  methods: {
    Change(index, $event) {
      console.log($event);

      this.changeSrc = $event.target.currentSrc;

      console.log(this.changeSrc);
    },
    handdle() {
      window.location.href = "https://hotels.ctrip.com/hotel/694679.html";
    }
  }
};
</script>

<style lang="less" scoped>
.container {
  width: 1000px;
  margin: 0 auto;
  padding-top: 20px;
  .el-breadcrumb {
    font-size: 16px;
  }
  .basic {
    margin-top: 30px;
    h4 {
      color: #333;
      font-weight: 400;
      font-size: x-large;
    }
    div {
      color: #666;
      font-size: 14px;
    }
  }
  .photo {
    margin: 40px 0;
    .content {
      display: flex;
      .left {
        width: 66.66%;
        img {
          width: 640px;
          height: 360px;
        }
      }
      .right {
        width: 33.333%;
        .right_content {
          width: 100%;
          height: 100%;
          div {
            width: 50%;
            float: left;
            padding: 0 5px;
            margin-bottom: 10px;
            img {
              width: 160px;
            }
          }
        }
      }
    }
  }
  .room {
    margin: 40px 0;
    .assets-info {
      border-bottom: 1px solid #eee;
      display: flex;
      .title {
        width: 16.66667%;
        float: left;
        padding: 20px 10px;
      }
      .list {
        width: 83.33333%;
        padding: 20px 10px;

        .listcontent {
          display: flex;
          justify-content: space-between;
        }
      }
    }
  }
  
}
</style>